<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DPL: 页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl.css">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl/dpl-demo.css">
</head>

<body class="cmWrapper dpl-demo-page">
<article class="cmPage">
	<header class="cmPageNavBar">
		<h1>页面</h1>
		<div class="cmBtnWrapper cmRight">
			<a class="cmBtn" href="javascript:location.reload();">刷新</a>
		</div>
		<div class="cmBtnWrapper cmLeft">
			<a class="cmBtn cmBack" href="../"><b>DPL</b></a>
		</div>
	</header>
	<section>
		<a class="cmBtn cmRightArrow" href="#" data-action="#slide-to-sub-page">切换至子页面</a>
	</section>
	<section>
		<h2>标题 + 按钮</h2>
		<header class="cmPageNavBar">
			<h1>标题</h1>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction" href="#none">左按钮</a>
			</div>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction" href="#none">右按钮</a>
			</div>
		</header>
		<header class="cmPageNavBar">
			<h1 class="cmLongText">标题超长超长超长超长超长</h1>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction" href="#none">左按钮</a>
			</div>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction" href="#none">右按钮</a>
			</div>
		</header>
	</section>
	<section>
		<h2>切换按钮 + 按钮</h2>
		<header class="cmPageNavBar">
			<div class="cmBtnSwitch cmBtnCombo">
				<div class="cmBtnWrapper current">
					<a href="#switch" class="cmBtnItem cmBtn">切换</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmBtnItem cmBtn">切换</a>
				</div>
			</div>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction" href="#none">左按钮</a>
			</div>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction" href="#none">右按钮</a>
			</div>
		</header>
		<header class="cmPageNavBar">
			<div class="cmBtnSwitch cmBtnCombo">
				<div class="cmBtnWrapper current">
					<a href="#switch" class="cmBtnItem cmBtn">文字超长</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmBtnItem cmBtn">文字超长</a>
				</div>
			</div>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction cmBack" href="#none"><b>文字超长文字超长</b></a>
			</div>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction cmForward" href="#none"><b>文字超长文字超长</b></a>
			</div>
		</header>
		<header class="cmPageNavBar">
			<div class="cmBtnSwitch cmBtnCombo cmLongText">
				<div class="cmBtnWrapper current">
					<a href="#switch" class="cmBtnItem cmBtn">文字超长</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmBtnItem cmBtn">文字超长</a>
				</div>
			</div>
			<div class="cmBtnWrapper cmLeft cmLongText">
				<a class="cmBtn cmAction cmBack" href="#none"><b>文字超长文字超长</b></a>
			</div>
			<div class="cmBtnWrapper cmRight cmLongText">
				<a class="cmBtn cmAction cmForward" href="#none"><b>文字超长文字超长</b></a>
			</div>
		</header>
	</section>
	<section>
		<h2>标题 + 按钮组合</h2>
		<header class="cmPageNavBar">
			<h1>标题</h1>
			<div class="cmBtnCombo cmLeft">
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">左</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">左</a>
				</div>
			</div>
			<div class="cmBtnCombo cmRight">
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">右</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">右</a>
				</div>
			</div>
		</header>
		<header class="cmPageNavBar">
			<h1>标题</h1>
			<div class="cmBtnLine cmLeft">
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">左</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">左</a>
				</div>
			</div>
			<div class="cmBtnLine cmRight">
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">右</a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">右</a>
				</div>
			</div>
		</header>
		<header class="cmPageNavBar">
			<h1>标题</h1>
			<div class="cmBtnLine cmLeft">
				<div class="cmBtnWrapper">
					<a class="cmBtn cmAction cmBack" href="#none"><b>上一步aaaaa</b></a>
				</div>
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">左</a>
				</div>
			</div>
			<div class="cmBtnLine cmRight">
				<div class="cmBtnWrapper">
					<a href="#switch" class="cmAction cmBtn">右</a>
				</div>
				<div class="cmBtnWrapper">
					<a class="cmBtn cmAction cmForward" href="#none"><b>下一步aaaaa</b></a>
				</div>
			</div>
		</header>
	</section>
	<hr>
	<section>
		<h2>标题栏左、右按钮（超长）</h2>
		<header class="cmPageNavBar">
			<h1>标题栏文字文字文字文字文字文字文字文字文字文字</h1>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction" href="#none">Long Long Button Text Here</a>
			</div>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction" href="#none">文字文字文字文字文字文字文字文字文字文字</a>
			</div>
		</header>
	</section>
	<section>
		<h2>标题栏上一步、下一步按钮</h2>
		<header class="cmPageNavBar">
			<h1>标题栏</h1>
			<div class="cmBtnWrapper cmRight">
				<a class="cmBtn cmAction cmForward" href="#none"><b>下一步aaaaa</b></a>
			</div>
			<div class="cmBtnWrapper cmLeft">
				<a class="cmBtn cmAction cmBack" href="#none"><b>上一步aaaaa</b></a>
			</div>
		</header>
	</section>
	<hr>
	<section>
		<a class="cmBtn" href="javascript:location.reload();">刷新</a>
	</section>
	<hr>
	<footer>
		<address>&copy; UEFED.COM</address>
	</footer>
</article>
<script type="text/template" id="template-dpl-page-sub-page">
<article class="cmPage cmPageScroll cmPageSlideReady" id="<%= data.id %>">
	<header class="cmPageNavBar">
		<h1<%= _.str.fullWidthLength(data.title) > 6 ? ' class="cmLongText"' : '' %>><%= data.title %></h1>
	<% if (_.isPlainObject(data.btnLeft)) { %>
		<div class="cmBtnWrapper cmLeft<%= _.str.fullWidthLength(data.btnLeft.label) > 4 ? ' cmLongText' : '' %>">
			<a class="cmBtn" href="#" data-action="<%= data.btnLeft.action || '' %>">
				<b><%= data.btnLeft.label || 'Action' %></b>
			</a>
		</div>
	<% } else if (_.isPlainObject(data.btnBack)) { %>
		<div class="cmBtnWrapper cmLeft<%= _.str.fullWidthLength(data.btnBack.label) > 4 ? ' cmLongText' : '' %>">
			<a class="cmBtn cmBack" href="#" data-action="<%= data.btnBack.action || '#dpl-page-slide-back' %>">
				<b><%= data.btnBack.label || 'Back' %></b>
			</a>
		</div>
	<% } %>
	<% if (_.isPlainObject(data.btnRight)) { %>
		<div class="cmBtnWrapper cmRight<%= _.str.fullWidthLength(data.btnRight.label) > 4 ? ' cmLongText' : '' %>">
			<a class="cmBtn" href="#" data-action="<%= data.btnRight.action || '' %>">
				<b><%= data.btnRight.label || 'Cancel' %></b>
			</a>
		</div>
	<% } %>
	</header>
	<div class="cmPageContentFrame">
		<div class="inner"><%= data.html %></div>
	</div>
</article>
</script>

<script src="/js/mv1/lib/lib.js"></script>
<script src="/js/mv1/lib/dpl.js"></script>
<script>_.ext.ini(); DPL.ini(); _.ga.ini();</script>
<script src="/js/mv1/dpl/dpl-demo.js"></script>
<script>DPL.demo.page.ini();</script>
</body>
</html>
